<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/demo/demo.css"/>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
	    var contextPath = function() {
	        return  "/" + location.pathname.split("/")[1];
	    }
	    
		function getValue(name){
			var str=window.location.search;
			if (str.indexOf(name)!=-1){
				var pos_start=str.indexOf(name)+name.length+1;
				var pos_end=str.indexOf("&",pos_start);
				if (pos_end==-1){
					return str.substring(pos_start);
				} else {
					return str.substring(pos_start,pos_end);
				}
			} else {
				return "";
			}
		}
		
		var  themeName = getValue("theme");
		if (themeName!=""){
		    var cssurl  = $('#easyuiTheme').attr('href');  
		    var href = cssurl.substring(0, cssurl.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';  
		    $('#easyuiTheme').attr('href', href);  
		}
	</script>

</head>

<style>
    .datagrid-btable{
        width:100%;
    }
    .datagrid-header-inner{
        width:100%;
    }
    .datagrid-header{
        width:100%;
    }
    .datagrid-htable{
        width:100%;
    }
    .datagrid-cell{margin:auto;}
    .fitem{text-align:center}
    .ftitle{text-align:center}
</style>

<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'用户操作痕迹'">	  
        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"
               toolbar="#searchform" pagination="true"
               pageSize="25"    
               pageList="[25,50,100,1000]"
               rownumbers="true" 
               fitColumns="true" 
               singleSelect="true"
			   remoteSort="false"
               multiSort="true">
            <thead data-options="frozen:true">
	            <tr>
	                <th data-options="field:'username',align:'center',sortable:true,width:'120'">用户名</th>
	                <th data-options="field:'nameCN',align:'center',sortable:true,width:'120'">中文名</th>
	                <th data-options="field:'source',align:'center',width:'90'">来源</th>
	                <th data-options="field:'target',align:'center',width:'120'">目标</th>
	                <th data-options="field:'operation',align:'left',width:'400'">操作内容</th>
	                <th data-options="field:'actionTime',align:'center',sortable:true,width:'160'">操作时间</th>
	                <th data-options="field:'lastTime',align:'center',sortable:true,width:'160'">离开时间</th>
	            </tr>
            </thead>
        </table>
		<form name="searchform" method="post" action="" id ="searchform">
			<td width="70" height="30">
				<strong>用户名：</strong>
			    <input class="easyui-textbox" type="text" id="search_username" name="username" size=20 >
			</td>			
			<td width="70" height="30">
				<strong>中文名：</strong>
			    <input class="easyui-textbox" type="text" id="search_usercn" name="usernameCN" size=20 >
			</td>
			<td height="30">
			    <a id="submit_search">搜索</a>
			    <a id="reset_search">重置</a>
			</td>
		</form>
    </div>
</div>


</body>

    <script type="text/javascript">

    $(function () {

    	$("#datagrid").datagrid({url: contextPath()+'/trace/getOperationTraceList'}); 
    	
        $("#datagrid").datagrid({queryParams: form2Json("searchform") });   
		//点击搜索
		$("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true }).click(function () {
            $('#datagrid').datagrid({ queryParams: form2Json("searchform") });   
        });
		//点击重置
		$("#reset_search").linkbutton({ iconCls: 'icon-reload', plain: true }).click(function () {
            $('#search_username').textbox('setValue',''); //将用户名的输入框清空
            $('#search_usercn').textbox('setValue',''); //将中文名的输入框清空
            //$('#datagrid').datagrid('reload');  
            $('#datagrid').datagrid({ queryParams: form2Json("searchform") });   
        });
    })
    
    //将表单数据转为json
    function form2Json(id) {
        var arr = $("#" + id).serializeArray();
        var jsonStr = "";
        jsonStr += '{';
        for (var i = 0; i < arr.length; i++) {
            jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
        }
        jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
        jsonStr += '}';
        var json = JSON.parse(jsonStr);
        return json;
    }
    
	</script>
</html>